<!DOCTYPE html>
<html>
<head>
    <title>Electron App</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="settings-section">
        <button id="setFoldersBtn" class="btn">设置Like/Delete文件夹</button>
        <div id="currentFoldersInfo" class="folders-info"></div>
    </div>
    <!-- 在body中添加收藏悬浮框 -->
    <div id="favoritePanel" class="favorite-panel" style="display: none;">
        <div class="favorite-header">
            <h3>收藏列表</h3>
            <div class="favorite-actions">
                <button id="confirmFavorites" class="btn">确认</button>
                <button id="cancelFavorites" class="btn">取消</button>
            </div>
        </div>
        <div id="favoriteList" class="favorite-list">
            <!-- 收藏项会动态添加到这里 -->
        </div>
    </div>
    <!-- 删除面板 -->
    <div id="deletePanel" class="delete-panel" style="display: none;">
        <div class="delete-header">
            <h3>删除列表</h3>
            <div class="delete-actions">
                <button id="confirmDelete" class="btn">确认删除</button>
                <button id="cancelDelete" class="btn">取消</button>
            </div>
        </div>
        <div id="deleteList" class="delete-list">
            <!-- 待删除项会动态添加到这里 -->
        </div>
    </div>
    <!-- 文件信息模态框 -->
    <div id="fileInfoModal" class="modal">
        <div class="modal-content">
        <div class="modal-header">
            <h3>文件信息</h3>
            <span class="close">&times;</span>
        </div>
        <div class="modal-body">
            <table class="info-table">
            <tbody id="fileInfoTable"></tbody>
            </table>
        </div>
        </div>
    </div>
    <!-- 添加提示对话框 -->
    <div id="clipboardDialog" class="dialog">
        <div class="dialog-content">
            <h3>检测到剪贴板内容</h3>
            <p id="clipboardPath"></p>
            <div class="dialog-buttons">
                <button id="useClipboardBtn">使用此路径</button>
                <button id="cancelClipboardBtn">取消</button>
            </div>
        </div>
    </div>
    <div class="titlebar">
        <div class="titlebar-title">文件控制器</div>
        <div class="titlebar-buttons">
            <button class="titlebar-button minimize-button" id="minimizeBtn"></button>
            <button class="titlebar-button maximize-button" id="maximizeBtn"></button>
            <button class="titlebar-button close-button" id="closeBtn"></button>
        </div>
    </div>
    <div class="container">
        <div class="input-group">
            <input type="text" 
                   class="path-input" 
                   id="pathInput" 
                   placeholder="请输入文件夹的绝对路径（例如：C:\Users\Documents）">
            <button class="submit-btn" id="scanBtn">扫描文件</button>
        </div>
        <div class="sort-controls">
            <select id="sortType" class="sort-select">
                <option value="name">按名称排序</option>
                <option value="size">按文件大小排序</option>
                <option value="mtime">按修改时间排序</option>
                <option value="ctime">按创建时间排序</option>
            </select>
            
            <select id="fileType" class="sort-select">
                <option value="all">所有文件</option>
                <option value="video">视频文件</option>
                <option value="image">图片文件</option>
                <option value="other">其他文件</option>
            </select>
            
            <button id="sortOrderBtn" class="sort-btn">↓ 降序</button>
        </div>
        <div class="file-list" id="fileList">
            <!-- 文件列表将在这里动态显示 -->
        </div>
        <!-- 在容器底部添加状态栏 -->
        <div class="status-bar general-area" id="statusBar">
            准备就绪
        </div>
    </div>

    <div id="fileModal" class="modal">
        
        <div class="modal-content">
            <!-- <button id="deleteVideoBtn" class="action-btn delete-btn">删除</button>
            <button id="collectVideoBtn" class="action-btn collect-btn">收藏</button> -->
            <div class="modal-header">
                <span class="close-modal">&times;</span>
            </div>
            <div class="modal-nav">
                <button id="prevFile" class="nav-btn">← 上一个</button>
                <button id="nextFile" class="nav-btn">下一个 →</button>
            </div>
            <div id="modalContent">
                <!-- 视频或图片将在这里显示 -->
            </div>
            <div class="file-info-bar">
                <span id="currentFileName"></span>
            </div>
        </div>
    </div>
    
    <script src="./js/index.js"></script>
</body>
</html>